<template>
  <div class="bjlRoad">
    <div class="amount">
      <div v-for="(item, index) in statistics" :key="index">
        <div :class="item.color">{{ item.name }}</div>
        <div>{{ item.amount }}</div>
      </div>
    </div>

    <!-- 珠盘路 -->
    <div class="ball-box scroll" ref="ballRef">
      <div class="ball-group">
        <div v-for="(item, index) in calcBallTable(ballGroup, 21, ballRef)" :key="index" class="w-16">
          <div v-for="(child, cIdx) in 6" :key="cIdx" class="h-16">
            <img
              v-if="
                (ballGroup?.[index]?.[cIdx] && ballGroup?.[index]?.[cIdx]?.indexOf('问') === -1) ||
                (ballGroup?.[index]?.[cIdx] && ballGroup?.[index]?.[cIdx]?.indexOf('问') !== -1 && isAsk)
              "
              :src="getCssBall('ball', ballGroup?.[index]?.[cIdx])"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 大路 -->
    <div class="big-box scroll" ref="bigRef">
      <div class="big-group">
        <div v-for="(item, index) in calcBallTable(bigGroup, 21, bigRef)" :key="index" class="w-16">
          <div v-for="(itm, idx) in 6" :key="idx" class="h-16">
            <div
              v-if="
                bigGroup?.[index]?.[idx]?.indexOf('问') === -1 ||
                (bigGroup?.[index]?.[idx]?.indexOf('问') !== -1 && isAsk)
              "
              class="row_itm all-center"
            >
              <img :src="getCssBall('big', bigGroup?.[index]?.[idx])" alt="" />
              <span v-if="/\d/.test(bigGroup?.[index]?.[idx])" class="he_number">
                {{ getCssBallNumber(bigGroup?.[index]?.[idx]) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="left">
        <!-- 大眼路 -->
        <div class="eye-box scroll" ref="eyeRef">
          <div class="eye-group">
            <div v-for="(item, index) in calcBallTable(eyeGroup, 34, eyeRef)" :key="index" class="w-8">
              <div v-for="(itm, idx) in 6" :key="idx" class="h-8">
                <img
                  v-if="
                    (eyeGroup?.[index]?.[idx] && eyeGroup?.[index]?.[idx]?.indexOf('问') === -1) ||
                    (eyeGroup?.[index]?.[idx] && eyeGroup?.[index]?.[idx]?.indexOf('问') !== -1 && isAsk)
                  "
                  :src="getCss('eye', eyeGroup?.[index]?.[idx])"
                  class="img"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 小路 -->
        <div class="small-box scroll" ref="smallRef">
          <div class="small-group">
            <div v-for="(item, index) in calcBallTable(smallGroup, 34, smallRef)" :key="index" class="w-8">
              <div v-for="(itm, idx) in 6" :key="idx" class="h-8">
                <img
                  v-if="
                    (smallGroup?.[index]?.[idx] && smallGroup?.[index]?.[idx]?.indexOf('问') === -1) ||
                    (smallGroup?.[index]?.[idx] && smallGroup?.[index]?.[idx]?.indexOf('问') !== -1 && isAsk)
                  "
                  :src="getCss('small', smallGroup?.[index]?.[idx])"
                  class="img"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 小强路 -->
        <div class="mins-box scroll" ref="minsRef">
          <div class="mins-group">
            <div v-for="(item, index) in calcBallTable(minsGroup, 34, minsRef)" :key="index" class="w-8">
              <div v-for="(itm, idx) in 6" :key="idx" class="h-8">
                <img
                  v-if="
                    (minsGroup?.[index]?.[idx] && minsGroup?.[index]?.[idx]?.indexOf('问') === -1) ||
                    (minsGroup?.[index]?.[idx] && minsGroup?.[index]?.[idx]?.indexOf('问') !== -1 && isAsk)
                  "
                  :src="getCss('mins', minsGroup?.[index]?.[idx])"
                  class="img"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="statistics">
        <div class="btns">
          <div @click="askRoad(zData)" class="ask">
            <span>庄问路</span>
            <div class="icon all-center">
              <img :src="renderIcon(zlist, 'eye', 0)" alt="" />
              <img :src="renderIcon(zlist, 'small', 1)" alt="" />
              <img :src="renderIcon(zlist, 'mins', 2)" alt="" />
            </div>
          </div>
          <div @click="askRoad(xData)" class="ask x-ask">
            <span>闲问路</span>
            <div class="icon all-center">
              <img :src="renderIcon(xlist, 'eye', 0)" alt="" />
              <img :src="renderIcon(xlist, 'small', 1)" alt="" />
              <img :src="renderIcon(xlist, 'mins', 2)" alt="" />
            </div>
          </div>

          <div class="explain" @click="explainShow = true">
            <span>问路说明</span>
            <Icon name="question-o" />
          </div>
        </div>
      </div>
    </div>

    <Popup v-model:show="explainShow" :round="true" class="explan-popup">
      <div class="explan-popup-inner">
        <div class="pop-title">问路说明</div>
        <div class="pop-content">
          <p>➤ 百家乐珠仔路</p>
          <div>
            红、蓝、绿分别表示庄赢、闲赢、和局。
            左上角的红点标示表示出现庄对，右下角的蓝点标示表示出现闲对，如果同时出现庄对和闲对，则同时在左上角和右下角标示红点和蓝点。
          </div>
          <p>➤ 百家乐大路</p>
          <div>
            大路路单是我们最常用的路，「大路」 就是把每一次开牌的结果记录下来，开 「庄」 ，用红色Ｏ表示，而开 「 闲 」
            则用蓝色Ｏ来代表。至于开「和」的话，用一条斜线，连续开和则用数位标明次数。
          </div>
          <p>➤ 百家乐大眼仔路</p>
          <div>
            首先大眼仔路单是根据大路路单生成的。起始标示的参照点从大路的第二行第二列开始，如果大路中该座标上没有出现「庄」或「闲
            」，则以大路的第三列第一行开始作为参照点。
            路单规定总体是：第一粒（即大路的第一粒）看齐整，齐整为红，不齐整为蓝，第二粒（即亨衢的第一粒）看有无或直落，有或直落为红，无为蓝。庄闲交错分布，从庄到闲，从闲到庄都要换到下一列书写，连庄和连闲则依次优先向下走，不能向下则向右走。
            齐整，大路当前参照点的前两列（不包括参照点所在的列）的红蓝的个数是否相等。
            有无，大路的第二粒水准向前看一粒，前面有一粒，无论红蓝则为红，没有则为蓝。
            直落，上一粒前面无粒，而次粒前也无粒，直落为红。
          </div>
          <p>➤ 百家乐小路</p>
          <div>
            起始参照点是从大路的第三列第二行开始，如果大路中该座标上没有结果，则开始参照点为第四列第一行。
            判断是否齐整、有或无、是否直落的方法与大眼路的方法大致相同，区别是：小路参考的两列是当前列与前前列，即第三列与第一列、第四列与第二列，以此类推。
          </div>
          <p>➤ 百家乐蟑螂 (曱甴) 路</p>
          <div>
            曱甴路又称小强路。
            起始参照点是从大路的第四列第二行开始，如果大路中该座标上没有结果，则起始参照点为第五列第一行。
            判断是否齐整、有或无、是否直落的门径与大眼路的方法大致相同，不同是曱甴路参考的两列是当前列与前前前列，即第四列与第一列、第五列与第二列，以此类推。
          </div>
        </div>
      </div>
      <img @click="explainShow = false" class="close" src="@/assets/img/rules/rules.png" alt="" />
    </Popup>
  </div>
</template>

<script setup lang="ts">
import { LotterCodeEnum, GAME_STATUS_CODE } from '@/enum'
import { useGameStore } from '@/stores/game'
import { findTrendChart } from '@/api'
import { Popup, Icon } from 'vant'
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue'

import zpl_z from '@/assets/img/road/bjl/ball-z.svg'
import zpl_x from '@/assets/img/road/bjl/ball-x.svg'
import zpl_h from '@/assets/img/road/bjl/ball-h.svg'
import zpl_zzd from '@/assets/img/road/bjl/ball-zzd.svg'
import zpl_xxd from '@/assets/img/road/bjl/ball-xxd.svg'
import zpl_zxd from '@/assets/img/road/bjl/ball-zxd.svg'
import zpl_xzd from '@/assets/img/road/bjl/ball-xzd.svg'
import zpl_zzdxd from '@/assets/img/road/bjl/ball-zzdxd.svg'
import zpl_hzdxd from '@/assets/img/road/bjl/ball-hzdxd.svg'

import dl_z from '@/assets/img/road/bjl/dl-z.svg'
import dl_x from '@/assets/img/road/bjl/dl-x.svg'
import dl_h from '@/assets/img/road/bjl/dl-h.svg'
import dl_zzd from '@/assets/img/road/bjl/dl-zzd.svg'
import dl_xxd from '@/assets/img/road/bjl/dl-xxd.svg'
import dl_zxd from '@/assets/img/road/bjl/dl-zxd.svg'
import dl_xzd from '@/assets/img/road/bjl/dl-xzd.svg'
import dl_zzdxd from '@/assets/img/road/bjl/dl-zzdxd.svg'
import dl_hzdxd from '@/assets/img/road/bjl/dl-hzdxd.svg'

import dyl_z from '@/assets/img/road/bjl/eye-z.svg'
import dyl_x from '@/assets/img/road/bjl/eye-x.svg'

import xl_z from '@/assets/img/road/bjl/small-z.svg'
import xl_x from '@/assets/img/road/bjl/small-x.svg'

import xql_z from '@/assets/img/road/bjl/mins-z.svg'
import xql_x from '@/assets/img/road/bjl/mins-x.svg'

const mapIcon = {
  // 图标
  ball: {
    // 珠盘路
    z: zpl_z, // 庄
    x: zpl_x, // 闲
    h: zpl_h, // 和
    zzd: zpl_zzd, // 庄庄对
    xxd: zpl_xxd, // 闲闲对
    zxd: zpl_zxd, // 庄闲对
    xzd: zpl_xzd, // 闲庄对
    zzdxd: zpl_zzdxd, // 庄庄对闲对
    hzdxd: zpl_hzdxd, // 和庄对闲对
  },
  big: {
    // 大路
    z: dl_z, // 庄
    x: dl_x, // 闲
    h: dl_h, // 和
    zzd: dl_zzd, // 庄庄对
    xxd: dl_xxd, // 闲闲对
    zxd: dl_zxd, // 庄闲对
    xzd: dl_xzd, // 闲庄对
    zzdxd: dl_zzdxd, // 庄庄对闲对
    hzdxd: dl_hzdxd, // 和庄对闲对
  },
  eye: {
    // 大眼路
    z: dyl_z, // 红
    x: dyl_x, // 蓝
  },
  small: {
    // 小路
    z: xl_z, // 红
    x: xl_x, // 蓝
  },
  mins: {
    // 小强路
    z: xql_z, // 红
    x: xql_x, // 蓝
  },
}

const totalSorted = [
  {
    key: '庄',
    color: 'zAmount',
  },
  {
    key: '和',
    color: 'hAmount',
  },
  {
    key: '闲',
    color: 'xAmount',
  },
  {
    key: '庄对',
    color: 'zAmount',
  },
  {
    key: '闲对',
    color: 'xAmount',
  },
]

const ballGroup = ref([]) // 珠盘路
const bigGroup = ref([]) // 大路
const eyeGroup = ref([]) // 大眼路
const smallGroup = ref([]) // 小路
const minsGroup = ref([]) // 小强路
const zAskGroup = ref([]) // 庄问路
const xAskGroup = ref([]) // 闲问路

const total = ref(0)

const statistics = ref([])

const zData = ref<any>([])
const xData = ref<any>([])
const zlist = ref([])
const xlist = ref([])

const isAsk = ref(false)
const canAsk = ref(true) // 是否可以问路
const askTimer = ref(null)

const askAssembly = ref(3000) // 问路按钮禁用时长，除以1000后为闪烁次数
const frequency = ref(null) // 问路闪烁倒计数

const explainShow = ref(false)

const gameStore = useGameStore()

const drawingStatus = computed(() => gameStore.drawingStatus)

const ballRef = ref()
const bigRef = ref()
const eyeRef = ref()
const smallRef = ref()
const minsRef = ref()

watch(
  () => drawingStatus.value,
  (newValue) => {
    if (newValue?.code === GAME_STATUS_CODE.kaijiang.code) {
      setTimeout(() => getList(), 1000)
    }
  },
  { immediate: true, deep: true },
)

const calcBallTable = computed(() => (type, defaultCol, tableRef) => {
  let len = type?.length
  if (!len) return
  if (defaultCol > len) return defaultCol
  scrollViewToRight(tableRef, len + 2)
  let _d = 2
  if (type === 'eyeGroup' || type === 'smallGroup' || type === 'minsGroup') {
    if (len % 2 === 1) {
      _d += 1
    }
  }
  return len + _d
})

onMounted(() => getList())

onBeforeUnmount(() => {
  if (askTimer.value) {
    clearInterval(askTimer.value)
    askTimer.value = null
  }
})

const getList = async () => {
  try {
    const {
      data: { TOTAL_CODE, PRE_XIAN_CODE, PRE_ZHUANG_CODE, PRE_ZHUANG_DATA, PRE_XIAN_DATA },
    } = await findTrendChart({
      lotteryCode: LotterCodeEnum.bjl,
      type: 3,
    })
    zData.value = PRE_ZHUANG_DATA
    xData.value = PRE_XIAN_DATA
    ballGroup.value = zData.value.ZHU_PAN_LU_CODE
    bigGroup.value = zData.value.DA_LU_CODE
    eyeGroup.value = zData.value.DA_YAN_LU_CODE
    smallGroup.value = zData.value.XIAO_LU_CODE
    minsGroup.value = zData.value.XIAO_QIANG_LU_CODE
    zAskGroup.value = PRE_ZHUANG_CODE
    xAskGroup.value = PRE_XIAN_CODE
    total.value = TOTAL_CODE
    zlist.value = PRE_ZHUANG_CODE && PRE_ZHUANG_CODE.filter((item) => item !== '庄' && item !== '闲')
    xlist.value = PRE_XIAN_CODE && PRE_XIAN_CODE.filter((item) => item !== '庄' && item !== '闲')
    if (TOTAL_CODE) {
      // 统计
      let arr = []
      totalSorted.forEach((i) => {
        arr.push({
          name: i.key,
          amount: TOTAL_CODE[i.key],
          color: i.color,
        })
      })
      arr.unshift({
        name: '局数',
        amount: TOTAL_CODE['TOTAL'],
        color: 'sum',
      })
      statistics.value = arr
    }
  } catch (e) {
    console.log(e)
  }
}

// 问路
const askRoad = (list) => {
  if (!list) return
  if (!canAsk.value) return
  canAsk.value = false
  ballGroup.value = list.ZHU_PAN_LU_CODE
  bigGroup.value = list.DA_LU_CODE
  eyeGroup.value = list.DA_YAN_LU_CODE
  smallGroup.value = list.XIAO_LU_CODE
  minsGroup.value = list.XIAO_QIANG_LU_CODE
  setTimeout(() => (canAsk.value = true), askAssembly.value)
  if (askTimer.value) clearInterval(askTimer.value)
  frequency.value = askAssembly.value / 1000
  isAsk.value = true
  askTimer.value = setInterval(() => {
    frequency.value -= 0.5
    if (frequency.value <= 0) clearInterval(askTimer.value)
    isAsk.value = Number.isInteger(frequency.value) && +frequency.value > 0
  }, 500)
}

// 问路图标
const renderIcon = (dataType, mapType, index) => {
  let icon = null
  if (dataType) {
    if (dataType[index]) {
      if (dataType[index] === '红') {
        icon = mapIcon[mapType].z
      } else {
        icon = mapIcon[mapType].x
      }
    }
    return icon
  }
}

const getCssBall = (target, item) => {
  if (!item) return undefined
  let text = item
  let amount = null
  if (/\d/.test(item)) amount = item.match(/\d+(.\d+)?/g)[0] // 提取数字
  if (text.includes('-')) text = item.split('-')[0]
  // 处理样式，如果上一局是庄，就在庄里画斜线。上一局是闲，就在闲里画斜线。数字大于1，就标数字，不用画斜线
  if (target === 'big' && amount === '1') {
    if (text === '庄') return mapIcon[target].hzdxd
    if (text === '闲') return mapIcon[target].h
  }
  if (text === '庄') return mapIcon[target].z
  if (text === '闲') return mapIcon[target].x
  if (text === '和') return mapIcon[target].h
  if (text === '庄,庄对') return mapIcon[target].zzd
  if (text === '闲,闲对') return mapIcon[target].xxd
  if (text === '庄,闲对') return mapIcon[target].zxd
  if (text === '闲,庄对') return mapIcon[target].xzd
  if (text === '庄,庄对,闲对') return mapIcon[target].zzdxd
  if (text === '和,庄对,闲对') return mapIcon[target].hzdxd
  if (text === '庄,问') return mapIcon[target].z
  if (text === '闲,问') return mapIcon[target].x
}

const getCssBallNumber = (item) => {
  if (/\d/.test(item)) {
    let amount = item.match(/\d+(.\d+)?/g)[0] // 提取数字
    if (amount === '1') return ''
    return amount
  }
}

// 下三路（大眼路，小路，小强路）
const getCss = (target, item) => {
  if (item === '红' || item === '红,问') return mapIcon[target].z
  if (item === '蓝' || item === '蓝,问') return mapIcon[target].x
  return ''
}

const scrollViewToRight = (tableRef, idx) => {
  if (!tableRef) return
  if (frequency.value && frequency.value < 3) return
  nextTick(() => {
    setTimeout(() => {
      tableRef.scrollLeft = tableRef.scrollWidth
    }, 100)
  })
}
</script>

<style lang="less" scoped>
@borderColor: rgba(67, 67, 107, 1);
@bgColor: #222635;

::-webkit-scrollbar {
  width: 0;
  height: 0 !important;
  background-color: unset;
  opacity: 0;
  height: 0 !important;
}

::-webkit-scrollbar-thumb {
  background-color: unset;
  opacity: 0;
}

.bjlRoad {
  height: 100%;
  padding: 21px 19px 0;

  img {
    width: 100%;
    height: auto;
  }
}

.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
    height: 0;
  }
}

.ball-box {
  width: 100%;
  margin-bottom: 12px;
}

.big-box,
.eye-box,
.small-box,
.mins-box {
  width: 100%;
}

.big-box,
.eye-box,
.small-box {
  // border-bottom: 1px solid rgba(206, 206, 206, 1);
}

.bottom {
  display: flex;
}

.left {
  width: 72%;
}

.statistics {
  width: 28%;
  color: #78797b;
  font-size: 12px;
  box-sizing: border-box;
  padding-top: 12px;

  .btns {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff;

    span {
      font-size: 12px;
      line-height: 1;
    }

    .ask {
      width: 78px;
      height: 40px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #ff5b51;

      .icon {
        width: 38px;
        height: 8px;
        background: #fff;
        border-radius: 7px;
        margin-top: 2px;
        box-sizing: border-box;

        img {
          margin: 0 2px;
          box-sizing: border-box;
          min-width: 6px;
        }
      }
    }

    .x-ask {
      background: #646de2;
      box-sizing: border-box;
    }

    .explain {
      width: 78px;
      height: 24px;
      line-height: 24px;
      background: rgba(248, 247, 255, 1);
      color: rgba(120, 121, 123, 1);
      border-radius: 4px;
    }
  }
}

.amount {
  display: flex;
  margin-bottom: 12px;
  font-size: 12px;

  > div {
    flex: 1;
    color: #fff;
  }

  .sum {
    color: #fff;
  }

  .zAmount {
    color: #ff5b51;
  }

  .hAmount {
    color: #13d10f;
  }

  .xAmount {
    color: #558cfd;
  }

  .zdAmount {
    color: #242424;
  }
}

.w-22 {
  width: 22px;
}

.h-22 {
  height: 22px;
}

.ball-group,
.big-group,
.eye-group,
.small-group,
.mins-group {
  width: max-content;
  display: flex;
  border-top: 1px solid @borderColor;
  border-left: 1px solid @borderColor;
  background-color: @bgColor;
}

.w-16 {
  width: 16px;
  box-sizing: border-box;
  border-right: 1px solid @borderColor;
}

.h-16 {
  height: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid @borderColor;
}

.w-8 {
  width: 8px;
  // padding: 0 1px;
  box-sizing: border-box;

  &:nth-of-type(2n) {
    border-right: 1px solid @borderColor;
  }
}

.h-8 {
  height: 8px;
  padding: 1px 0;
  box-sizing: border-box;
  display: flex;

  &:nth-of-type(2n) {
    border-bottom: 1px solid @borderColor;
  }
}

.row_itm {
  position: relative;
}

.he_number {
  font-size: 12px;
  color: #13d10f;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
}

.pop-title {
  color: #fff;
  padding: 10px 0 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.pop-content {
  height: 72vh;
  max-height: 500px;
  text-align: left;
  padding: 0 15px 30px;
  box-sizing: border-box;
  overflow-y: scroll;
  border-radius: 0 0 15px 15px;
  text-align: justify;
  > p {
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing: border-box;
  }
}
.explan-popup {
  background: transparent;
  color: #bdc4ff;
  box-sizing: border-box;
  border-radius: 15px;
  &-inner {
    background: #1e1f31;
    border-radius: 15px;
    border: 0.5px solid #41445e;
  }
  .close {
    display: block;
    margin: 0 auto;
    width: 40px;
    margin-top: 35px;
    box-sizing: border-box;
  }
}
</style>
